<template>
  <div class="search-page">
    <div class="nav-bar">
      <div class="nav-status" :style="{height:statusH + 'px'}"></div>
      <div class="nav-head flex-row-v-center" :style="{height:titleH + 'px'}">
        <div class="flex-row-v-center" style="padding-left: 10px;">
          <img style="width: 22px;height: 22px" src="/static/assets/img/icon/icon-arrow-left.png"
               @click="onClickGoBack()"/>
        </div>
        <div class="search-box flex-row-v-center"
             style="position:relative;width:calc(100% - 150px);border-radius: 8px; margin-left: 10px; height: 25px;">
          <img src="/static/assets/img/icon/icon-search.png" style="width: 14px; height: 15px;margin-left: 10px"/>
          <input style="position:absolute;left:30px;right:10px;height:100%;font-size: 13px"
                 placeholder="搜索问题/商品"
                 confirm-type="search"
                 @confirm="doSearch"
                 v-model="word"
                 placeholder-style="color: #afafaf"/>
        </div>
      </div>
    </div>
    <div class="search-container" :style="{'padding-top':titleH + statusH + 'px'}">
      <div class="search-history" v-if="showHistory">
        <div class="search-top flex-row-flex-end">
          <span>搜索历史</span>
          <span @click="onClickClear">清空历史</span>
        </div>
        <div class="search-keys">
          <block v-if="keys.length > 0">
            <block v-for="keyword in keys" :key="keyword">
              <span class="keyword" @click="onClickKeys(keyword)">{{keyword}}</span>
            </block>
          </block>
          <block v-else>
            <div class="empty flex-center">
              <span>暂无历史</span>
            </div>
          </block>
        </div>
      </div>
      <div class="search-result" v-else>
        <div class="top flex-center">
          <div class="title flex-1">
            <div :class="{active:showType==0}" @click="onClickType(0)">疾病知识({{postCount}})</div>
          </div>
          <div class="line"></div>
          <div class="title flex-1">
            <div :class="{active:showType==1}" @click="onClickType(1)">商品({{goodsCount}})</div>
          </div>
        </div>
        <div class="content">
          <div class="article-box" v-if="showType == 0">
            <div class="article-list-box">
              <block v-for="post in postList" :key="post.id">
                <div class="article-box flex-row-v-center" @click="goToPostDetail(post.id)">
                  <div class="flex-1 flex-col-h-center">
                    <div class="title">{{ post.title }}</div>
                    <div class="extra flex-row-v-center">
                      <div class="label-txt">{{ post.label_name }}</div>
                      <div class="name-txt">{{ post.name }}</div>
                      <div class="date-txt">{{ post.processCreateTime }}</div>
                    </div>
                  </div>
                  <img class="article-img" :src="post.cover_img_url"/>
                </div>
              </block>
            </div>
            <div class="flex-center tip-txt" style="margin-top: 10px" v-if="postCount>0">没有更多了</div>
          </div>
          <div class="goods-box" v-if="showType == 1">
            <div class='goods-content'>
              <div class="goods-item" v-for="item in goodsList" :key="item.id" @click="onTapGoodsDetail(item)">
                <div class="img-box">
                  <img mode="scaleToFill" :src="item.coverImg"/>
                </div>

                <div class="goods-desc">
                  <div class="title-txt">{{ item.name }}</div>
                  <div class="desc-txt">{{ item.description }}</div>
                  <div class="label-box flex-row-v-center">
                    <span>{{ item.label_name }}</span>
                  </div>
                  <div class="price-box">
                    <span class="current-price-txt">¥{{ item.processPrice }}</span>
                    <span class="original-price-txt">¥{{ item.processGuidePrice }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex-center tip-txt" v-if="goodsCount>0">没有更多了</div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import global from 'global'
  import Core from 'core'
  import Common from 'common'

  export default {
    components: {},

    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,
        keywords: [],
        keys: [],
        word: '',
        postList: [],
        goodsList: [],
        postCount: 0,
        goodsCount: 0,
        showHistory: true,
        showType: 0
      }
    },
    mounted () {
      this.keywords = Core.Data.get(`${Common.getUid()}_search`) || []
      this.keys = this.keywords.reverse()
    },
    methods: {

      onClickGoBack () {
        Core.Util.goBack()
      },
      onClickKeys (keyword) {
        this.word = keyword
        this._search(keyword)
      },
      doSearch (e) {
        let text = e.mp.detail.value
        if (text) {
          this.keywords.push(text)
          Core.Data.set(`${Common.getUid()}_search`, this.keywords)
          this.keys = this.keywords.reverse()
          this._search(text)
        }
      },
      onClickClear () {
        Core.Data.set(`${Common.getUid()}_search`, [])
        this.keys = []
        this.keywords = []
      },

      onClickType (type) {
        this.showType = type
      },

      onTapGoodsDetail (item) {
        Common.go('/pages/产品中心/详情/main?goods_id=' + item.id)
      },

      goToPostDetail (postId) {
        Common.go(`/pages/疾病知识/详情/main?post_id=${postId}`)
      },

      _search (key) {
        this.showHistory = false
        Core.Api.Index.search(key).then(res => {
          this.goodsList = res.goods_list
          this.goodsList.forEach(v => {
            v.createTime = Core.Util.timeFormat(v.create_time, 'Y-m-d')
            v.processPrice = Core.Util.processMoney(v.price)
            v.processGuidePrice = Core.Util.processMoney(v.guide_price)
            v.processExpressFee = Core.Util.processMoney(v.express_fee)
            v.coverImg = Core.Util.getImgUrl(v.cover_img)
          })
          this.postList = res.post_list
          this.postList.forEach(v => {
            v.processCreateTime = Core.Util.timeFormat(v.create_time, 'Y-m-d')
          })

          this.postCount = res.post_count
          this.goodsCount = res.goods_count
          if (this.postCount != 0 && this.goodsCount == 0) {
            this.showType = 0
          } else if (this.postCount == 0 && this.goodsCount != 0) {
            this.showType = 1
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .search-page {
    width: 100%;
    height: 100%;
    position: relative;
    background: #F5F5F5;

    .nav-bar {
      background: #FFFFFF;

      .search-box {
        background-color: rgb(245, 246, 247);
      }
    }

    .search-container {
      width: 100%;
      .search-history {
        width: 100%;
        padding: 10px 20px;
        background: #FFFFFF;

        .search-top {
          span {
            color: #afafaf;
            font-size: 16px;
          }

          span + span {
            font-size: 12px;
          }

        }
        .search-keys {
          padding-top: 20px;
          padding-bottom: 10px;
          max-height: 220px;
          overflow-y: auto;
          .keyword:first-child {
            margin-left: 0;
          }
          .keyword {
            display: inline-block;
            margin-top: 10px;
            font-size: 13px;
            color: rgb(142, 142, 142);
            padding: 5px 10px;
            background: rgb(245, 246, 247);
            margin-right: 10px;
            border-radius: 5px;
            white-space: normal;
          }
          .empty {
            width: 100%;
            height: 40px;
            font-size: 18px;
            color: #313131;
          }
        }
      }

      .search-result {
        .top {
          width: 100%;
          height: 50px;
          background: #ffffff;

          .line {
            height: 40px;
            width: 1px;
            background: #f5f5f5;
          }
          .title {
            color: rgb(142, 142, 142);
            text-align: center;
            line-height: 50px;
            font-size: 13px;
            div {
              display: inline-block;
              height: 100%;
            }
          }
          .active {
            color: #68DDED;
            border-bottom: 2px solid #68DDED;
          }
        }
        .content {

          .goods-box {
            padding: 10px 12px;

            margin-top: 4px;
            .goods-title {
              font-size: 16px;
              color: rgb(59, 59, 59);
              padding: 10px 0;
            }

            .goods-content {
              column-count: 2;
              column-gap: 10px;
            }

            .goods-item {
              border-radius: 4px;
              margin-bottom: 10px;
              background: #FFFFFF;
              overflow: hidden;
              display: inline-block;
              font-size: 0;
              width: 100%;

              .img-box {
                width: 100%;
                height: 172px;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              .goods-desc {
                padding: 6px 4px;
                display: inline-block;
                font-size: 0;

                .title-txt {
                  color: rgb(119, 120, 121);
                  font-size: 14px;
                }
                .desc-txt {
                  color: rgb(143, 143, 145);
                  font-size: 12px;
                }
                .label-box {
                  padding: 4px 0;
                  span {
                    font-size: 10px;
                    background: rgb(30, 181, 205);
                    padding: 3px 4px;
                    line-height: 10px;
                    border-radius: 6px;
                    color: #FFFFFF;
                  }
                }

                .price-box {
                  line-height: 16px;
                  margin-bottom: 6px;
                  .current-price-txt {
                    color: rgb(250, 108, 113);
                    font-size: 16px;
                    margin-right: 4px;
                  }
                  .original-price-txt {
                    color: rgb(181, 181, 182);
                    font-size: 12px;
                    text-decoration: line-through;
                  }
                }
              }
            }
          }

          .article-list-box {
            padding: 0 12px;
            background: #FFFFFF;

            .article-box {
              padding: 12px 0;
              border-bottom: 1px solid rgba(0, 0, 0, 0.07);
              .title {
                color: #313131;
                font-size: 16px;
              }

              .extra {
                margin-top: 10px;
                .label-txt {
                  color: #D9AA19;
                  border: 1px solid #D9AA19;
                  font-size: 12px;
                  line-height: 12px;
                  padding: 4px 10px;
                  border-radius: 9px;
                }

                .name-txt {
                  margin-left: 12px;
                  color: #939393;
                  font-size: 12px;
                }

                .date-txt {
                  margin-left: 11px;
                  color: #939393;
                  font-size: 12px;
                }
              }

              .article-img {
                width: 111px;
                height: 65px;
                margin-left: 10px;
              }
            }
          }

          .tip-txt {
            font-size: 12px;
            color: rgb(86, 86, 86);
            line-height: 30px;
          }
        }
      }
    }
  }
</style>
